<!-- 登录页面 -->

<template>
    <div class="main">
        <div class="login">
            <div class="header">Vite_Vue3_Ts</div>
            <el-card class="form_box">
                <el-card class="logo">
                    <div class="img">
                        <u-image :src="logoimg"></u-image>
                    </div>
                </el-card>
                <div class="form">
                    <el-form
                        ref="ruleFormRef"
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        class="demo-ruleForm">
                        <el-form-item label="邮箱" prop="email">
                            <el-input
                                v-model="ruleForm.email"
                                type="text"
                                autocomplete="off"
                                placeholder="请输入邮箱" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input
                                v-model="ruleForm.password"
                                type="password"
                                autocomplete="off"
                                placeholder="请输入密码" />
                        </el-form-item>
                        <el-form-item>
                            <div class="footerbtn">
                                <el-button type="primary" @click="submitForm(ruleFormRef)">
                                    登录
                                </el-button>
                                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { getLogin } from '@/api/login';
import { LofinFormInt, TokenToInfo } from '@/types/login';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from '@/store';
import jwt_decode from 'jwt-decode';
import logoimg from '@/assets/images/logo-with-shadow.png';

// 定义表单ref
const ruleFormRef = ref<FormInstance>();
// 定义表单绑定数据
const ruleForm = reactive<LofinFormInt>({
    email: 'admin@admin.com',
    password: 'a123123',
});
// 路由信息
const router = useRouter();
// 表单校验规则
const rules = reactive({
    email: [{ type: 'email', required: true, message: '请输入邮箱', trigger: 'blur' }],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度需要大于6', trigger: 'blur' },
    ],
});
// 表单重置事件
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
// vuex
const store = useStore();
// 表单提交事件
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(valid => {
        if (valid) {
            // 表单校验通过
            getLogin(ruleForm).then((res: any) => {
                ElMessage.success('登录成功');
                // 解析token
                const decode = jwt_decode<TokenToInfo>(res.token);
                // 保存用户名
                store.dispatch('setUserName', decode?.name);
                localStorage.setItem('username', decode?.name);

                localStorage.setItem('eleToken', res.token);
                router.push({ name: 'index' });
            });
        } else {
            console.log('error submit');
            return false;
        }
    });
};
</script>

<style scoped lang="scss">
@import '@/styles/login.scss';

:deep(.el-card) {
    overflow: unset !important;
}
</style>
